<template>
	<view class="tabbar-container">
		<view class="tabbar-item" v-for="(item,index) in list" :key="index" @click="switchItem(item,index)">
			<image :src="item.iconPath" :class="selectedIndex == index ? 'action' : ''"></image>
			<view class="selected-pointer" v-if="selectedIndex === index"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			currentPage: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				selectedIndex: 0,
				list: [{
						"pagePath": "/pages/index/index",
						"iconPath": "/static/home.png",
						"text": "首页"
					},
					{
						"pagePath": "/pages/laws/laws",
						"iconPath": "/static/know.png",
						"text": "法规"
					},
					{
						"pagePath": "/pages/mine/mine",
						"iconPath": "/static/mine.png",
						"text": "个人"
					}
				],
				animationData:{}
			};
		},
		
		created() {
			this.selectedIndex = this.currentPage
			console.log(this.selectedIndex);
		},
		methods: {
			switchItem(item,index) {
				uni.switchTab({
					url: item.pagePath
				})
				this.currentItem = index
			}
		}
	}
</script>

<style lang="scss">
	.tabbar {
		&-container {
			position: fixed;
			bottom: 100rpx;
			left: 30rpx;
			right: 30rpx;
			height: 140rpx;
			background: white;
			display: flex;
			border-radius: 15px;
			box-shadow: 0 3px 3px rgba(10, 16, 20, 0.08), 0 0 3px rgba(10, 16, 20, 0.12);
		}

		&-item {
			position: relative;
			flex: 1;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			image {
				width: 27px;
				height: 27px;
			}
		}
	}

	.selected-pointer {
		position: absolute;
		bottom: 10rpx;
		background-color: #333;
		width: 5px;
		height: 5px;
		border-radius: 50%;
	}
	
	.action {
		animation: tada 1s alternate;
	}
</style>
